<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>违章缴纳</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../../../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../../../css/app.css" />
	<link href="../../../css/mui.picker.min.css" rel="stylesheet" />
	<link href="../../../css/mui.poppicker.css" rel="stylesheet" />	
	<style type="text/css">
	   body,.mui-content{background-color: #fff; overflow: auto;}
	   .mui-content .idCard>h3{color: #666; height: .8rem; line-height: .8rem; background-color: #f5f5f5; font-size: .32rem; padding-left: .3rem; box-sizing: border-box; margin: 0;}
	   .idCard .ico_card{display: inline-block; vertical-align: middle; margin:0 .1rem 0 0; width: .48rem; height: .48rem; background: url(../../../images/service/s_ico04.png) no-repeat; background-size:cover;}
	   .mui-table-view-cell{padding: .25rem .3rem}
	   .car_inf{margin-top: .3rem;}
	   .mui-input-group:before,.mui-table-view:before,.mui-table-view:after,.mui-input-group:after{background:none;}
	   .mui-table-view-cell:last-child:after{height: 1px;}
	   .mui-table-view li{padding:.3rem; color: #999999;font-size: .3rem}
	   .car_inf .type_car{color: #333;font-size: .3rem;display: inline-block; min-width: 1.1rem; padding: .1rem 0; position: relative;}
	   .car_inf .type_car:after{content: '';width: 0px; height: 0px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #999999; position: absolute; top:13px; right: -10px;}
	   .car_inf .car_short:after{content: '';width: 0px; height: 0px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #999999; position: absolute; top:13px; right: 15px;}
	   .mui-input-group input{width: 30%;font-size: .3rem; padding: 0; height: auto;}
	   .mui-input-group input.car_pai{width: 65%;}              
	   button[type=button]{margin: .6rem .25rem; color: #fff; width:7rem; padding: .25rem 0px; background-color: #ff7800; font-size: .32rem; border: none;}
	   .ico_code{background: url(../../../images/service/s_ico06.png) no-repeat; display: inline-block; vertical-align: middle; width: .43rem; height: .43rem; background-size: cover; margin: 0px .1rem 0px 0px;}
	   select{margin-bottom: 0;}
	</style>
</head>
<body>
	<div class="mui-content">		
		<!-- 身份证验证start -->
		<div class="idCard">
		    <h3><i class="ico_card"></i>机动车违章缴纳</h3>
		    <div class="car_inf">
		    	<form class="mui-input-group">
					<ul class="mui-table-view">
					    <li class="mui-table-view-cell" id="showCityPicker">选择城市：
					        <span class="type_car" ><span id="province">上海</span></span>
					        <span class="type_car" style="margin-left: 15px;"><span id='city'>上海</span>市</span>					      
					    </li>							
					    <li class="mui-table-view-cell">车辆类型：
				        	<select style="width: 60%;" id='carType' name="" class="type_car">
					    		<option value="01">大型车</option>
					    		<option value="02" selected="selected">小型车</option>
					    		<option value="06">外籍汽车</option>
					    		<option value="07">两、三轮摩托车</option>
					    		<option value="11">境外摩托车</option>
					    		<option value="12">外籍摩托车</option>
					    		<option value="15">挂车 </option>
					    		<option value="26">香港出入境车</option>
					    		<option value="27">澳门出入境车</option>
					    	</select>
					    </li>
					    <li class="mui-table-view-cell">车牌号：
					        <span class="type_car car_short" id='carCardPiker' style="width: 1.1rem;text-align: left;padding-left: 0.1rem;">沪</span>
					        <input id="carNo" type="text" class="mui-input-clear" placeholder="车牌号">
					    </li>
					    <li class="mui-table-view-cell">违章单号：
					        <input id="fineNo" type="text" class="mui-input-clear car_pai" placeholder="请输入违章单号">
					    </li>
					    <li class="mui-table-view-cell">违章金额：
					        <input id="fineFee" type="text" class="mui-input-clear car_pai" placeholder="请输入违章金额">
					    </li>
					    <li class="mui-table-view-cell">发动机后6位：
					        <input id="engineId" type="text" class="mui-input-clear car_pai" placeholder="请输入发动机后6位">
					    </li>						    
					</ul>
				</form>
		    </div>
            <button id="handler" type="button" class="mui-btn mui-btn-block ripple"><i class="ico_code"></i>立即处理</button>
		</div>
		<!-- 身份证验证end -->
	</div>
	<script type="text/javascript" src="../../../js/mui.min.js"></script>
	<script type="text/javascript" src="../../../js/app.js" ></script>
	<script type="text/javascript" src="../../../js/common.js" ></script>
	<script type="text/javascript" src="../../../js/jquery2.2.4.min.js" ></script>
	<script type="text/javascript" src="../../../js/mui.picker.min.js"></script>
	<script type="text/javascript" src="../../../js/mui.poppicker.js"></script>
	<script type="text/javascript" src="../../../js/city.data-3.js" ></script>
	<script type="text/javascript" src="../../../js/payment.js" ></script>
	<script type="text/javascript">
		mui.init();
		(function(mui,$){
			//立即处理			
			document.getElementById("handler").addEventListener('tap',function(){
				var city = $("#city").text();
				var province = $("#province").text();
				var carType = $("#carType").val();
				var carNo = $("#carCardPiker").text()+ $("#carNo").val();
				//违章金额
				var fineFee = $("#fineFee").val();
				//违章单号
				var fineNo = $("#fineNo").val();
				//发动机号
				var engineId = $("#engineId").val();
				if(!$("#carNo").val() ){
					mui.toast("请填写车牌号");return;
				}
				if(!fineNo ){
					mui.toast("请填违章单号");return;
				}
				if(!fineFee ){
					mui.toast("请填写违章金额");return;
				}
				if(!engineId ){
					mui.toast("请填写发动机编号");return;
				}
				
				var params =  jsonToParams({
					delayFee:0,
					carType:carType,
					carNo:carNo,
					fineFee:fineFee,
					fineNo:fineNo,
					engineId:engineId,
					city:city,
					province:province
				})
				var url = "appHttpService/qianmi/createTrafficBill.do";
				utils.ajax(url,function(data){
					data = JSON.parse(data);
					if(data.state == 1){
						var billId = data.billId;
						var subject = fineFee + province +  city + "--" + "交通违章缴费";
						var subdesc = appName + '-' + subject;
						pay(fineFee,subject,subdesc,billId,function(){
							mui.alert("缴费成功!","提示",null,function(){
								plus.webview.currentWebview().hide("zoom-fade-out");
								plus.webview.currentWebview().close();
							},'div')
						});
					}else{
						mui.alert(data.msg ? data.msg : "生成订单失败",null,null,null,'div');
					}
				},params,{showWait:true})
				
			})
			var cityPicker = new mui.PopPicker({layer: 2});
			cityPicker.setData(cityData3);
			//城市选择
			document.getElementById("showCityPicker").addEventListener('tap', function() {
				cityPicker.show(function(items) {
					$("#province").text(items[0].text);
					$("#city").text(items[1].text);
				});
			}, false);
			//车牌初始化
			var carCardArray = ['京','津','沪','渝','冀','豫','云','辽','黑','湘','皖','鲁','新','苏','浙','赣','鄂','桂','甘','晋','蒙','陕','吉','闽','贵','粤','青','藏','川','宁','琼','使','领'];
			var carCardPiker =  new mui.PopPicker({layer: 1});
			carCardPiker.setData(carCardArray);
			document.getElementById("carCardPiker").addEventListener('tap', function() {
				carCardPiker.show(function(item) {
					$("#carCardPiker").text(item);
				});
			}, false);
		}(mui,jQuery))
	</script>
</body>

</html>